<template>
  <div class="mains">
    <div class="wrapper">
          <div class="one_echarts"></div>
          <!-- <h3>已办件</h3> -->

    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      inProcess: 20,
    };
  },
  created() {},
  mounted() {
    this.$nextTick((item) => {
      this.huaData1();
    });
  },
  methods: {
    // 画审批中心
    huaData1() {
      console.log(11111);
      let kong = 100 - this.inProcess;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.querySelector(".wrapper .one_echarts")
      );
      let option1 = {
        tooltip: {
          show: true, //显示提示框
        },
        legend: {
          bottom: "0%",
          left: "center",
          // 设置图例之间 垂直上下（左右水平）距离
          itemGap: 100,
          icon: "roundRect",
          // 设置图列每一项的宽高
          itemWidth: 0,
          itemHeight: 0,
          textStyle: {
            //图例文字的样式
            color: "#333",
            fontSize: 20,
            fontFamily: "微软雅黑",
          },
        },
        series: [
          {
            name: "已办件",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: "{total|" + this.inProcess + "%}",
                rich: {
                  total: {
                    fontSize: 26,
                    fontFamily: "微软雅黑",
                    color: "#333",
                  },

                  active: {
                    fontFamily: "微软雅黑",
                    fontSize: 14,
                    color: "#f00",
                    lineHeight: 30,
                  },
                },
              },
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.2)",
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = ["#ECEFF7", "#417CE0"];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [{ value: kong }, { value: this.inProcess, name: "已办件" }],
          },
        ],
      };
      // 3,绘图
      myChart.setOption(option1);
    },
  },
};
</script>
<style  scoped>
.wrapper {
  width: 500px;
  height: 300px;
}

.one_echarts {
  width: 100%;
  height: 100%;
}

</style>
